<template>
  <div class="management-merchant views-container" v-loading="loading">
    <div class="wlm-table">
       <!-- 选择次卡弹窗 -->
    <!-- @close="clearData" -->
    <el-dialog  custom-class="wlm-form-dialog dialog-table" :visible.sync="dialogTableVisible"  width="50%">
       <div class="wlm-dialog-fixheader">
        <span class="wlm-dialog-inlenr">选择次卡</span>
      </div>  
       <!-- 内容部分 -->
         <el-scrollbar style="width:100%;height: 520px;max-height: 520px;">
            <div class="goods-list-box">
              <!-- 搜索框 -->
                <div class="goods-serch">
                      <el-input  v-model="tableFormatData.userTable.files.title" placeholder="搜索商品名称"></el-input>
                      <i class="el-icon-search pos-col-center" @click="filesSerch"></i>
                </div>
                <!-- 搜索框结束 -->
                <!-- 商品部分 -->
                <div v-if="hasTableData.length >0"  class="goods-list-group flex-row flex-warp">
                  <div class="goods-list" v-for="(item, index) in tableFormatData.userTable.tableData" :key="index">
                        <div class="goods-item flex-row flex-align-c">
                          <!-- <div class="img-center" v-if="item.image && item.image[0]" :style="{'background-image':`url(${item.image[0].file_path})`}"></div> -->
                          <!-- <div class="img-center" ></div> -->
                          <div class="img-center" v-if="item.logo && item.logo[0]" :style="{'background-image':`url(${item.logo[0].file_path})`}"></div>
                              <div class="flex-col flex-align-c flex-justify-b scale-grow">
                                <div class="ellipsis">
                                  <p style="line-height:1.6">{{item.title}}</p>
                                </div>
                                <!-- <p class="ellipsis"><p>{{item.goods_name}}</p><p>{{item.stock}}</p></p> -->
                                <p class="flex-row flex-align-c flex-justify-b flex-grow-1" style="font-size: 16px;">
                                  <span class="text-danger" >￥{{item.unit_price}}</span>
                                  <el-button
                                  :disabled="item.is_show==2"
                                    type="primary"
                                    :class="{'is-active':currentRow.includes(item.card_id)}"
                                    round
                                    plain
                                    size="mini"
                                    style="font-size:12px;"
                                    @click="chooseGoodsbtn(item.card_id,item)"
                                  >{{`${currentRow.includes(item.card_id)?'取消':'选择'}`}}</el-button>
                                </p>
                              </div>
                        </div>
                  </div>
                </div>
                 <div class="no-tabledata" v-if="isTableFormatGetEnd && !(hasTableData.length >0)" v-cloak>
                  <svg-icon style icon-class="notabledata" />
                  <span style="display: block;margin: -45px auto 0;">暂无商品数据</span>
                </div>
                <!-- 商品部分结束 -->
            </div>
         </el-scrollbar>
         <div class="pagination-content flex-row flex-justify-b flex-align-c">
            <el-row class="pagination-btns"></el-row>
            <el-pagination
              style="margin-top:20px;margin-bottom:20px;margin-right: 25px;"
              :disabled="!hasTableData"
              @size-change="listPageChange"
              @current-change="listPageChange"
              :current-page.sync="tableFormatData.userTable.pagination.page"
              :page-sizes="tableFormatData.userTable.pagination.pagesizes"
              :page-size.sync="tableFormatData.userTable.pagination.list_rows"
              layout="total, sizes, prev, pager, next, jumper"
              :total="hasTableData.length > 0 ? tableFormatData.userTable.pagination.total : 0"
            ></el-pagination>
      </div>

         <div class="wlm-dialog-fixfooter">
        <span slot="footer" class="dialog-footer">
          <!-- @click="toggle" -->
          <el-button size="small" @click="toggle">取 消</el-button>
          <!-- @click="saveChoose" -->
          <el-button size="small" type="primary"  @click="saveChoose">确 定</el-button>
        </span>
      </div>
   
   
   
   
   
   
   
   
    </el-dialog>


    <!-- 选择设置规则弹窗 -->
       <el-dialog :visible.sync="dialogFormVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
            <div  class="wlm-form" v-if="dialogFormVisible">
              <div class="wlm-form-header wlm-dialog-fixheader">
              <span class="wlm-dialog-inlenr">设置规则</span>
            </div>
             <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="wlm-form-content">
          <div class="wlm-dialog-main">
            <div class="wlm-dialog-content">
              <el-form  :rules="formFormatData.rules" :model="selectData" size="small" label-width="100px" class="retail-form" label-position="right">
              <el-form-item label="返钱模式" prop="sort_name">
                       <el-radio-group v-model.trim="selectData.return_rule_type">
                          <el-radio :label="1">返钱数值</el-radio>
                          <el-radio :label="2">返钱比例</el-radio>
                        </el-radio-group>
              </el-form-item>
            <div v-for="(item,index) in selectData.return_rule" :key="index">
                <div style="display: flex;align-items: center;">
                 <div>
                    第{{item.num}}人
                 </div>
                  <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                    <el-input-number :controls="false" v-model="item.free_num" :min="0"></el-input-number>
                    <!-- <div class="wlm-input-append append-right" v-if="selectData.return_rule_type==2">%</div>
                    <div class="wlm-input-append append-right" v-if="selectData.return_rule_type==1">元</div> -->
                </div>
                 <!-- <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                  <el-input-number :controls="false" v-model="item.peridos" :min="0"></el-input-number>
                  <div class="wlm-input-append append-right">%</div>
                </div> -->
              </div>
            </div>
            </el-form>
            </div>
          </div>
        </div>
             </el-scrollbar>
            </div>
            <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
              <el-button size="small" @click="saveBtns" type="primary">保存</el-button>
            </footer>
        </el-dialog>
      <div class="wlm-dialog-content">
        <!-- :model="formFormatData.formData" :rules="formFormatData.rules" -->
        <el-form
          ref="userForm"
          size="small"
          label-width="200px"
          class="retail-form"
          label-position="right"
          :model="formFormatData.formData"
        >
          <el-form-item label="活动名称">
            <el-input
              v-model="formFormatData.formData.title"
              
              placeholder="请输入活动名称"
              style="width:60%;"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="formFormatData.formData.activity_stime"
              value-format="timestamp"
            
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="免单模式">
            <el-radio-group v-model="formFormatData.formData.free_pattern">
              <el-radio :label="1">被分享者需要购买</el-radio>
              <el-radio :label="2">被分享者只需打开</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="免单返钱到">
            <el-radio-group
              v-model="formFormatData.formData.free_return_channel"
            >
              <el-radio :label="1">余额</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="关联内容">
          <div style="display:flex">
              <el-checkbox-group
              v-model="formFormatData.formData.related_content"
             
              @change="relatedbtn"
            >
              <!-- <el-checkbox
                v-for="role in roledata"
                :label="role.value"
                :key="role.value"
              >
               { label: "商品", value: "1" },
        { label: "次卡", value: "2" }
                {{ role.label }}
              </el-checkbox> -->
                              <el-checkbox label="1">商品</el-checkbox>
                              <el-checkbox label="2" v-if="patSetting.plugin.card_bag.open">次卡</el-checkbox>
            </el-checkbox-group>
            <div style="margin-left:20px;" class="form-help" v-if="formFormatData.formData.related_content.indexOf('1')!=-1 || formFormatData.formData.related_content.indexOf('2')!=-1">
              注：商品仅限于单规格，次卡仅限于固定次数
            </div>
          </div>
            
            <choose-goods
              ref="chooseGoods"
              :config="chooseGoodsConfig"
              :changeEvt="filtersChange"
            ></choose-goods>
            <div>
              <!-- custormItemData.paramsxdata.indexOf(custormItemData.paramsdata[0]) !=-1 " -->
              <el-button
                type="primary"
                @click="goodsToogle"
                v-if="formFormatData.formData.related_content.indexOf('1')!=-1 "
                >选择商品</el-button>
                <div class="form-help" v-if="formFormatData.formData.related_content.indexOf('1')!=-1 ">注：活动进行中或结束不能修改商品信息，请谨慎添加</div>
            </div>
            <el-table
              v-if="formFormatData.formData.related_content.indexOf('1')!=-1"
              :data="formFormatData.formData.collocation.goods"
              style="width: 70%;margin-top:20px"
            >
              <el-table-column prop="date" label="排序">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.sort"
                    placeholder=""
                    :controls="false"
                    style="width:100%;"
                   
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="商品名称">
                <template slot-scope="scope">
                  <div class="flex-row">
                    <div class="inner-text">
                      <!-- <p>{{ scope.row.goods.goods_name?'':scope.row.goods.goods_name}}</p> -->
                      <p>{{ !!scope.row.goods[0]&&scope.row.goods[0]!=''?scope.row.goods[0].goods_name:''}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="售卖价">
                <template slot-scope="scope">
                  <!-- <p>{{ scope.row.goods.goods_price }}</p> -->
                  <p>{{ !!scope.row.goods[0]&&scope.row.goods[0]!=''?scope.row.goods[0].goods_price:'' }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="库存">
                <template slot-scope="scope">
                  <!-- <p>{{ scope.row.goods.stock_num }}</p> -->
                   <p>{{ !!scope.row.goods[0]&&scope.row.goods[0]!=''?scope.row.goods[0].stock_num:'' }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="需分享人数">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.share_num"
                    placeholder=""
                    :controls="false"
                     :min="0"
                    style="width:100%"
                    @change="hangdRule(scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="返钱规则" width="150">
                <template slot-scope="scope">
                  <!-- <div style="width:80px;display:flex;">
                     <div v-for="(item,index) in scope.row.return_rule" :key="index" class="dddd" >
                         <el-input v-model="item.num">
                            <template slot="append">%</template>
                         </el-input>
                  </div>
                  </div> -->
                     <div v-for="(item,index) in scope.row.return_rule" :key="index" class="dddd" style="width:100px;">
                         <el-input v-model="item.num">
                            <template slot="append">%</template>
                         </el-input>
                  </div>
                 
                  <!-- 开始是个input框，废弃 -->
                  <!-- <el-input
                    v-model="scope.row.return_rule"
                    placeholder=""
                  ></el-input> -->
                  <!-- <el-button @click="hangdRule(scope.row)">设置规则</el-button> -->
                </template>
              </el-table-column>
              <el-table-column label="分类" min-width="200">
                  <template slot-scope="scope">
                      <el-select v-model="scope.row.sort_id" multiple placeholder="请选择">
                          <el-option
                            v-for="item in sortData"
                            :key="item.sort_id"
                            :label="item.sort_name"
                            :value="item.sort_id"
                            :disabled="item.is_status==2"
                            >
                          </el-option>
                        </el-select>
                  </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="operation-group">
                    <el-button
                      class="wlm-text"
                      type="text"
                      @click="deleteTable(scope)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            
            <div
              class="form-help"
               v-if="formFormatData.formData.related_content.indexOf('1')!=-1"
            >
              返钱规则：按下单顺序第几人返多少钱，请用逗号隔开，可以使用商品售价的百分比如50%,30%,20%也可直接输入返的具体金额数字如40,20
            </div>
             <el-button
                type="primary"
                @click="TimecardBtn()"
                 v-if="formFormatData.formData.related_content.indexOf('2')!=-1"
                 style="margin-top:20px;"
               
                >选择次卡</el-button>
                <div class="form-help"  v-if="formFormatData.formData.related_content.indexOf('2')!=-1">注：活动进行中或结束不能修改商品信息，请谨慎添加</div>

            <el-table
              v-if="formFormatData.formData.related_content.indexOf('2')!=-1"
              :data="formFormatData.formData.collocation.card"
              style="width: 70%;margin-top:20px"
            >
              <el-table-column prop="date" label="排序">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.sort"
                    placeholder=""
                    :controls="false"
                    style="width:100%;"
                  ></el-input-number>
                </template>
              </el-table-column>
            <el-table-column prop="date" label="活动名称">
                <template slot-scope="scope">
                  <div class="flex-row">
                    <div class="inner-text">
                      <p>{{ scope.row.card[0].title}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
                 <el-table-column prop="date" label="售卖价">
                <template slot-scope="scope">
                  <p>{{ scope.row.card[0].unit_price}}</p>
                </template>
              </el-table-column>
               <el-table-column prop="date" label="次数">
                <template slot-scope="scope">
                  <!-- <p>{{ scope.row.goods.stock_num }}</p> -->
                   <p>{{scope.row.card[0].number}}</p>
                </template>
              </el-table-column>
                <el-table-column prop="date" label="需分享人数">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.share_num"
                    placeholder=""
                    :controls="false"
                    :min="0"
                    style="width:100%"
                     @change="hangdRule(scope.row)"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="返钱规则" width="150">
                <template slot-scope="scope">
                      <div v-for="(item,index) in scope.row.return_rule" :key="index" class="dddd" style="width:100px;">
                         <el-input v-model="item.num">
                            <template slot="append">%</template>
                         </el-input>
                  </div>
                  <!-- <el-input
                    v-model="scope.row.return_rule"
                    placeholder=""
                  ></el-input> -->
                   <!-- <el-button @click="hangdRule(scope.row)">设置规则</el-button> -->
                </template>
              </el-table-column>
              <el-table-column label="分类" min-width="200">
                  <template slot-scope="scope">
                      <el-select v-model="scope.row.sort_id" multiple placeholder="请选择">
                          <el-option
                            v-for="item in sortData"
                            :key="item.sort_id"
                            :label="item.sort_name"
                            :value="item.sort_id"
                            :disabled="item.is_status==2"
                            >
                          </el-option>
                        </el-select>
                  </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div class="operation-group">
                    <el-button
                      class="wlm-text"
                      type="text"
                      @click="cardeleteTable(scope)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div
              class="form-help"
               v-if="formFormatData.formData.related_content.indexOf('2')!=-1"
            >
              返钱规则：按下单顺序第几人返多少钱，请用逗号隔开，可以使用商品售价的百分比如50%,30%,20%也可直接输入返的具体金额数字如40,20
            </div>
             
          </el-form-item>
          <el-form-item label="参与者标签">
            <el-select
              v-model="formFormatData.formData.tag_id"
              multiple
              placeholder="请选择用户标签"
            >
              <el-option
                v-for="(item, index) in labelLists"
                :key="index"
                :label="item.name"
                :value="item.id.toString()"
              >
                {{ item.name }}
              </el-option>
            </el-select>
            <div class="form-help">参与活动后，即可为该用户贴上的标签</div>
          </el-form-item>
          <!-- <el-form-item label="活动介绍">
            <ueditor
              v-if="isFirst"
              :ueditorChange="shopInfoChange"
              :ueditorList="ueditorList"
              :bindIndex="1"
              :defaultMsg="defaultMsg1"
              :config="{ initialFrameWidth: null, initialFrameHeight: 350 }"
              ref="by_know"
            ></ueditor>
          </el-form-item> -->
          <el-form-item label="海报图片">
           <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
            <div class="form-help">建议尺寸：大小2M以下,建议尺寸750×1334px</div>
          </el-form-item>
           <!--  -->
          <el-form-item
            label="海报设置"
           v-if="formFormatData.formData.poster_id.length > 0"
          >
            <div class="poster-wrap">
              <div
                class="poster-box"
                v-bind:style="{
                  'background-image': `url(${getPath('drag-bg.png')})`
                }"
              >
                <!-- 背景图 -->
                <div
                  v-for="(item, index) in formFormatData.formData.poster_id"
                  :key="index"
                  style="position: absolute;"
                >
                  <img
                    :src="item.file_path"
                    style="width: 375px; height: 667px;position: relative;"
                  />
                </div>
                <div class="poster-img">
                  <!-- 拖动组件 -->
                  <vue-draggable-resizable
                    :w="112"
                    :h="112"
                    :x="x"
                    :y="y"
                    @dragging="onDrag"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/image/11.png"
                      style="width:110px;height:110px;"
                    />
                  </vue-draggable-resizable>
                  <vue-draggable-resizable
                    :w="50"
                    :h="50"
                    :x="x1"
                    :y="y1"
                    @dragging="onResizedata"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/store/default_avatar.png"
                      style="width:50px;height:50px;"
                    />
                  </vue-draggable-resizable>
                </div>
                <div class="poster-reset" @click="resetbtn">重置</div>
              </div>
              <div class="poster-buttom">
                <p>海报图设计说明：（设计图宽度为750px时）</p>
                <p>头像（方型）尺寸为 100 * 100px</p>
                <p>二维码（方型）尺寸为 220 * 220px</p>
                <p>小技巧：</p>
                <p>1、把头像拖拽到二维码上面，可以隐藏头像</p>
                <p>
                  2、当头像、二维码拖拽模块出现偏离屏幕、无法拖动等异常情况，可使用“重置”按钮进行复位操作
                </p>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button
        size="small"
        type="primary"
        @click="saveForm"
        :loading="butt"
        >保存</el-button
      >
          <router-link tag="span" to="/application/freeofCharge">
                <el-button size="small">返回</el-button>
            </router-link>
    </div>
  </div>
</template>
<script>
import ChooseGoods from "@/components/ChooseGoods/index";
import ChooseFiles from "@/components/ChooseFiles/index";
import fp from "lodash/fp";
import power from "@/mixins/power";
import mixins from "@/mixins/mixins";
import ueditor from "@/components/Ueditor/index";
import {
  labelList
} from '@/api/user'
import { freeEdit,getEditFree,getFreeSort,getCardInfo } from "@/api/freeofcharge";
import {
    Base64
} from 'js-base64'
import {
  tooggleArray
} from '@/utils/index'
window.fp = fp
export default {
  mixins: [mixins.getters("Form"),mixins.getters("Table"),power],
  name: "freeofChargeAdd",
  components: {
    ChooseGoods,
    ueditor,
    ChooseFiles
  },
  data() {
    return {
      //时间处理，当前时间之前的时间不能选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      share_num:'',
      currentRow:[],
      timecardData:[],
      dialogTableVisible:false,
      dialogFormVisible:false,
      sortData:[],
      loading:false,
      butt:false,
      labelLists: [],
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      x1: 0,
      y1: 0,
      results:[],
      isFirst: false,
      ueditorList: [],
      defaultMsg1: "",
      sort: "",
      sort_id:[],
      share_num: "",
      return_rule:[],
      return_rule_type:1,
      // roledata: [
      //   { label: "商品", value: "1" },
      //   { label: "次卡", value: "2" }
      // ],
      choosePlatformConfig:{
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display"
        },
        isUnique: true, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "poster_id",
          model: "img"
        }
      },
      chooseGoodsConfig: {
        type: ["chooseGoods"],
        model: "normal",
        goods_type: "all",
        // unique: true,
        disabled: [
          {
            label: "goods_id",
            value: Number(this.$route.query.id)
          }
        ],
        initList: []
      },
      formFormatData: {
        key: "userForm",
        api: {
          editForm: {
            api: getEditFree,
            params: {
              free_id: this.$route.query.id
            },
             redirect: 'praise_id',
            filters: {
              img: {
                bindInit: ["choosePlatformConfig"]
              },
              choose: {
                bindInit: ["chooseGoodsConfig"]
              }
            }
          }
          // submitForm: saveServicesData
        },
        formData: {
          title: "",
          return_rule:[],
          activity_stime: [],
          free_pattern: 1,
          free_return_channel:1,
          activity_introduction: "", //活动介绍
          related_content: [],
          poster_id: [],
          collocation: {
            goods:[],
            card:[],
          },
          code_action: [],
          tag_id: [], // 用户标签id
          head_action: [],
        }
      },
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList:getCardInfo
          },
          tableData: [],
          files: {
            title:'',
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    };
  },
  computed: {
    getPath() {
      return function(path) {
        return path.includes("https://") || path.includes("http://")
          ? `${path}`
          : require(`@/assets/custorm_style/${path}`);
      };
    },
 
  },
  created() {
    // 标签列表
    labelList({
      name: "",
      checkall: 0,
      Recycle: 1,
      page: 1,
      list_rows: 10000
    }).then(res => {
      if (res.data.code === 1) {
        this.labelLists = res.data.data.data
      }
    });
  if(this.$route.query.free_id){
    this.getEditFree()
  }
  this.getFreeSortbtn()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isFirst = true;
      }, 500);
    });
  },
  methods: {

    relatedbtn(){
    },
    saveBtns(){
   
    },
    // saveDialogForm() {
    //   this.resetDialogFormData({ })
    // },
    // 设置规则
    hangdRule(ruledata){
      console.log("4445456+6465sfds",ruledata)
       ruledata.return_rule = []
          for(var num =1;num<=ruledata.share_num;num++){
            ruledata.return_rule.push({num})
          }
          console.log("fjfjjfff",ruledata.return_rule)
    },
    // 选择次卡操作
    TimecardBtn(){
      this.dialogTableVisible = true
      let altdata = []
      this.formFormatData.formData.collocation.card.forEach(res=>{
          altdata.push(Number(res.card_id));
      })
      this.results = altdata
      console.log("0.0.0.0",this.currentRow)
    },
    chooseGoodsbtn(ids, item){
       this.currentRow = tooggleArray(this.currentRow, ids)
      console.log("22222222222222", this.currentRow)
       //如果是选中状态就把选中的数据push到数组中，不是选择状态就把此数据删除
      if(this.currentRow.includes(item.card_id)){
          this.timecardData.push(item)
          console.log('item+++++++++++++++', this.timecardData)
      }else{
          const newIndex =  this.timecardData.findIndex((displayItem) => {
          return displayItem.card_id === ids
        })
        this.timecardData.splice(newIndex, 1)
      }
    },
    toggle(){
       this.dialogTableVisible = false
    },
    saveChoose(){
      const  arr = this.timecardData.map(res=>{
        const newData = [{
          title: res.title,
          card_id: res.card_id,
          unit_price:res.unit_price,
          number:res.number,
        }];
        return {
          card: newData,
          card_id: res.card_id,
          sort: this.sort,
          share_num: this.share_num,
          return_rule: this.return_rule,
          return_rule_type:this.return_rule_type,
          sort_id:this.sort_id,
          is_goods:2,
        };
      })
      //得到新数据并且去重
      this.formFormatData.formData.collocation.card = fp.uniqBy('card_id',[...this.formFormatData.formData.collocation.card,...arr]);
     
      this.dialogTableVisible = false
    },
    getFreeSortbtn(){
      getFreeSort().then(res=>{
        if(res.data.code==1){
          console.log("fdhfdhdhdh福达合金的父节点",res)
          this.sortData = res.data.data
        }
      })
    },
    getEditFree(){
      getEditFree({free_id:this.$route.query.free_id}).then(res=>{
        if(res.data.code==1){
          this.formFormatData.formData = res.data.data
          //图片回显
              this.choosePlatformConfig.initList = res.data.data.poster_id
            this.formFormatData.formData.poster_id = res.data.data.poster_id
           this.defaultMsg1 = res.data.data.activity_introduction
            this.formFormatData.formData.collocation = res.data.data.collocation
            this.x= Number(res.data.data.code_action[0])
                this.y = Number(res.data.data.code_action[1])
                 this.x1= Number(res.data.data.head_action[0])
                this.y1 = Number(res.data.data.head_action[1])
          this.loading = false
          this.butt = false
        }
      })
    },
    formFormatCallBack(data, type, response) {
      if (type === "editForm") {
        const { activity_introduction,collocation,poster_id} = data;
        console.log("fdjfdjfdjf发就发JFJF解决方",data,type,response)
        this.defaultMsg1 = activity_introduction
       
      }
    },
    shopInfoChange(msg) {
      this.defaultMsg1 = msg;
    },
    deleteTable(scope) {
      this.formFormatData.formData.collocation.goods.splice(scope.$index, 1);
    },
     cardeleteTable(scope) {
      this.formFormatData.formData.collocation.card.splice(scope.$index, 1);
    },
    filtersChange(val) {
      console.log("fdsjfjdfjdfjjfj反击反击JFJF",val)
      const displayData = val.displayData;
      const result = [];
      displayData.map(item => {
        console.log("发达省份都是", item);
        // const newData = {
        //   goods_name: item.goods_name,
        //   goods_id: item.goods_id,
        //   stock_num: item.stock,
        //   goods_price: item.goods_min_price,
        //   goods_price: item.sku[0].goods_price
        // };
        const newData = [{
          goods_name: item.goods_name,
          goods_id: item.goods_id,
          stock_num: item.stock,
          goods_price: item.goods_min_price,
          goods_price: item.sku[0].goods_price
        }];
        result.push({
          goods: newData,
          goods_id: item.goods_id,
          sort: this.sort,
          share_num: this.share_num,
          return_rule: this.return_rule,
          return_rule_type:this.return_rule_type,
          sort_id:this.sort_id,
          is_goods:1,
        });
      });
      this.formFormatData.formData.collocation.goods.push(...result);

    },
    goodsToogle() {
      const result = [];
      this.formFormatData.formData.collocation.goods.map(item => {
        result.push(Number(item.goods_id));
      });
      this.$refs.chooseGoods.currentRow = result;
      this.$refs.chooseGoods.toggle();
    },
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      //  code_action:[],二维码
      //  head_action:[],头像
      (this.x = x),
        (this.y = y),
        (this.formFormatData.formData.code_action = [x, y]);
    },
    onResizedata(x1, y1) {
      (this.x1 = x1),
        (this.y1 = y1),
        (this.formFormatData.formData.head_action = [x1, y1]);
    },
    resetbtn() {
      (this.x = 0),
        (this.y = 0),
        (this.x1 = 0),
        (this.y1 = 0),
        (this.formFormatData.formData.code_action = [0, 0]);
      this.formFormatData.formData.head_action = [0, 0];
    },
    saveForm() {
      //关联内容选择了商品，如果没有填写需分享人数，返钱规则，就不能保存
      // if(this.formFormatData.formData.related_content.indexOf('1')!=-1){
      //   console.log("1111111",this.formFormatData.formData.collocation.goods)
      //   return
      // }

     
      // let falg = false
      // this.formFormatData.formData.activity_introduction = this.defaultMsg1;
      console.log("jfjdj最终数据",this.formFormatData.formData.collocation)
      // this.formFormatData.formData.collocation.goods.forEach(item=>{
      //    !item.share_num=='' && (falg = true)
      // })
      // console.log("ffff",falg)
      //  if(falg){
      //   this.$message.error("请填写分享人数！")
      //   return
      // }
      // return
      const data = Base64.encode(JSON.stringify(this.formFormatData.formData))
      this.loading = true
      this.butt = true
      freeEdit({data}).then(res => {
        if(res.data.code==1){
          this.loading = false
          this.$message.success("操作成功！")
          this.$router.push('/application/freeofCharge')
        }else{
            this.loading = false
            this.butt = false
            this.$message.error(res.data.msg)
        }
      }).finally(()=>{
        this.loading = false
        this.butt = false
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
.el-scrollbar__wrap{
  overflow: hidden;
}
.dddd{
  /deep/ .el-input-number{
    width: 150px;
  }
  /deep/ .el-input__inner{
    width:80px;
  }
}
.poster-wrap {
  align-items: center;
  display: flex;
  .poster-box {
    position: relative;
    width: 375px;
    height: 667px;
    padding: 102px 22px 115px 23px;
    // background: url(../../assets/image/drag-bg.png) 0px 0px / 100% 100% no-repeat;
    box-sizing: content-box;
    .poster-img {
      position: relative;
      width: 375px;
      height: 667px;
    }
    .poster-reset {
      position: absolute;
      bottom: 22px;
      left: 174px;
      right: 23px;
      text-align: center;
      flex: 0 0 70px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      cursor: pointer;
      border-radius: 50%;
    }
  }
  .poster-buttom {
    padding: 2px 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
    margin: 0px 0px 0px 20px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
  }
 
}
.goods-list-box {
    width: 100%;
    min-height: 520px;
    padding: 20px 20px;
    margin-top: -20px;
    border-left: 1px solid #f2f2f2;

    .no-tabledata {
      text-align: center;

      svg {
        font-size: 20em;
      }
    }

    /deep/ .goods-serch {
      position: relative;
      margin-bottom: 20px;
      text-align: left;
      margin-top: 20px;

      .el-input__inner {
        width: 200px;
        border: none;
        background: rgb(237, 237, 237);
        border-radius: 20px;
        font-size: 12px;
      }

      i {
        cursor: pointer;
        left: 200px;
        margin-left: -35px;
        font-size: 20px;
      }
    }

    .goods-list {
      width: 50%;

      &:not(:nth-last-child(1)) {
        padding-bottom: 20px;
      }

      .goods-item {
        border: 1px solid #d8d1d1;
        margin-right: 20px;
        padding: 8px 10px;
        border-radius: 3px;

        .img-center {
          border-radius: 10px;
          width: 90px;
          height: 80px;
        }

        .scale-grow {
          padding: 0 5px;
        }

        .ellipsis {
          width: 100%;
          font-size: 13px;
          text-align: left;
          margin-bottom: 16px;

          & + p.flex-row {
            width: 100%;
          }
        }

        .text-danger + .el-button {
          width: 62px;
          background: transparent;

          &:not(.is-not) {
            color: #409eff;
          }

          &.is-not {
            border-color: transparent;
            color: #fff !important;
            background: rgb(203, 203, 203) !important;
          }

          &.is-active {
            border-color: transparent;
            color: #fff !important;
            background: #409eff !important;
          }

          &.is-disabled {
            border-color: transparent;
            color: #fff !important;
            background: #c0c4cc !important;
          }
        }
      }
    }
  }
</style>
